<!--登录界面
作者：张家豪
时间：2020/6/22
-->
<template>
<body id="poster">
    <el-form  ref="idLoginForm" :model="loginForm" :rules="myrules" class="login-container" label-position="left" label-width="0px">
      <h3 class="login_title">系统登录</h3>
          <el-tab-pane label="用户管理" name="first">用户管理</el-tab-pane>
      <el-form-item prop="username">
        <el-input type="text" v-model="loginForm.username" prefix-icon="el-icon-user" @keyup.enter.native="mysubmit"
         auto-complete="off" placeholder="账号"></el-input>
      </el-form-item>
 
      <el-form-item prop="password">
        <el-input type="password" v-model="loginForm.password" auto-complete="off" placeholder="密码" prefix-icon="el-icon-lock" 
                    @keyup.enter.native="mysubmit"></el-input>
      </el-form-item>
      <el-form-item style="width: 100%" >
      <el-select style="width: 100%" v-model="loginForm.role" clearable placeholder="请选择身份" >
      <el-option
        v-for="item in options"
        :key="item.value"
        :label="item.label"
        :value="item.value">
      </el-option>
      </el-select>
      </el-form-item>
      <el-form-item style="width: 100%">
        <el-button type="primary" style="width: 100%;background: #505458;border: none"  @click="mysubmit">登录</el-button>
      </el-form-item >
      <div>
        <el-link :underline="false" type="primary"  style="marginRight: 220px"
        @click="edit()" >注册账号</el-link>
        <el-link :underline="false"  type="primary"  @click="edit_password()">找回密码</el-link>
      </div>  
    </el-form>
    <Edit :visible='visible' :title="title" :defaultFormData='defaultFormData' 
    v-if='visible' @close = 'close'/>
    <Edit_password :visible='visible_password' :title="title" :defaultFormData='defaultFormData' 
    v-if='visible_password' @close = 'close'/>
  </body>

</template>



<script>
import Edit from './register'
import Edit_password from './ChangePassword'
import {login} from '@/api/modules/user'
import {setStore} from '@/libs/storage'
import {setCookie} from '@/libs/cookie'


export default {
    name:'Login',
    components:{Edit,Edit_password},
    data(){
        var checkLength = (rule, value, callback) => {
            if (!value) {
            return callback(new Error('用户名不能为空'))
            }
        
            if (value.length >= 2) {
                callback()
            } else {
                callback(new Error('用户名长度必须大于2'))
            }
        
        };
       
        return {
          
            options:[
            {
              value: '学生',
              label: '学生'
            },{
              value: '老师',
              label: '老师'
            },{
              value: '管理员',
              label: '管理员'
            }],
            loginForm:{
                username:'',
                password:'',
                role:'',
                verifycode:''
            },
            myrules:{
                username:{validator:checkLength},
                password:{required:true,message:'密码不能为空'},
               
            },
            visible: false,
            visible_password: false,
            defaultFormDate:{}
        }
    },
    // 验证码
    mounted() {
   
    },

    methods:{
      
<<<<<<< HEAD
    
        close(val){
=======
      // 验证码
      randomNum(min, max) {
      return Math.floor(Math.random() * (max - min) + min);
      },
      refreshCode() {
      this.identifyCode = "";
      this.makeCode(this.identifyCodes, 4);
      },
      makeCode(o, l) {
      for (let i = 0; i < l; i++) 
      { this.identifyCode +=this.identifyCodes[ this.randomNum(0, this.identifyCodes.length)]; 
      } 
      console.log(this.identifyCode); } ,


      close(val){
>>>>>>> c60d65668b201db932d59f811cfa2aba9f96464d
        this.visible = false
        this.visible_password = false
      },
      edit(){
        this.visible = true
        this.title = '注册账号'
        this.defaultFormData = {}
      },
      edit_password(){
        this.visible_password = true
        this.title = '找回密码'
        this.defaultFormData = {}
      },
        mysubmit(){
            this.$refs.idLoginForm.validate(valid =>{
                if(valid){
                   login(this.loginForm).then(res =>{
                    //记住token  
                    let token = res.data.token;
                    setStore("token",token)
                    let user = res.data.user
                       
                    setCookie("user", JSON.stringify(res.data.user), {
                        expires: 7
                    })
                    if(user.status== 0){
                        this.toast(res.message,6)
                    }
                    else if(user.role== "管理员")
                    {
                        this.toast(res.message,1)
                        this.navigator('/Admin')
                    }
                    else if(user.role == "老师")
                    {
                      this.navigator('/create_class');
                    }
                    else if(user.role == "学生")
                    {
                      this.navigator('/student/page');
                    }
                    
                    }).catch(data =>{
                        this.toast(data,3)
                    }) 
                }
            })
            
        }
    }
}
</script>

<style scoped>
  .identifybox{
  display: flex;
  justify-content: space-between;
  margin-top:7px;
  }
  .iconstyle{
  color:#409EFF;
  }
  #poster {
    background:url("../../assets/login.jpg") no-repeat;
    background-position: center;
    height: 100%;
    width: 100%;
    background-size: cover;
    position: absolute;
  }
  body{
    margin: 0px;
    padding: 0;
  }
 
  .login-container {
    border-radius: 15px;
    background-clip: padding-box;
    margin: 90px auto;
    width: 350px;
    padding: 35px 35px 15px 35px;
    background: #fff;
    border: 1px solid #eaeaea;
    box-shadow: 0 0 25px #cac6c6;
  }
 
  .login_title {
    margin: 0px auto 40px auto;
    text-align: center;
    color: #505458;
  }
 
 
</style>